import { FileOutlined, PieChartOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { useState } from 'react';
import { Navigate, NavLink, Route, Routes } from 'react-router-dom';
// 引入页面
import './App.css'
import Context from './views/context'
import Fragment from './views/fragment'
import UseState from './views/useState'
import UseStateArray from './views/useState/array'
import Fc from './views/React.FC'
import UseEffect from './views/useEffect'
import UseEffectAxios from './views/useEffect/axios'
import UseEffectCapture from './views/useEffect/capture'
import UseCallback from './views/useCallback'
import Compont from './views/compont'


const { Header, Content, Footer, Sider } = Layout;
/* function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const items = [
  getItem('Files', '1', <FileOutlined />),
  getItem('Files', '2', <FileOutlined />),
  getItem('Files', '3', <FileOutlined />),
]; */


const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
		{/* <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} /> */}
		{ /* 路由链接*/}
        <NavLink className="navlink" to='/context'>组件传值</NavLink>
        <NavLink className="navlink" to='/compont'>引入子组件</NavLink>
        <NavLink className="navlink" to='/fragment'>fragment</NavLink>
        <NavLink className="navlink" to='/useState'>useState</NavLink>
        <NavLink className="navlink" to='/useStateArray'>useState-数组</NavLink>
        <NavLink className="navlink" to='/useEffect'>useEffect</NavLink>
        <NavLink className="navlink" to='/useEffectAxios'>useEffect-axios</NavLink>
        <NavLink className="navlink" to='/useEffectCapture'>useEffect-capture</NavLink>
        <NavLink className="navlink" to='/useCallback'>useCallback</NavLink>
        <NavLink className="navlink" to='/fc'>React.FC</NavLink>
      </Sider>
      <Layout>
        <Content
          style={{
            margin: '0 16px',
          }}
        >
          <div
            style={{
              padding: 24,
              minHeight: 900,
              background: colorBgContainer,
            }}
          >
		  { /* 注册路由 */}
            <Routes>
				<Route path='/context' element={<Context/>}></Route>
				<Route path='/fragment' element={<Fragment/>}></Route>
				<Route path='/useState' element={<UseState/>}></Route>
				<Route path='/useStateArray' element={<UseStateArray/>}></Route>
				<Route path='/useEffect' element={<UseEffect/>}></Route>
				<Route path='/useEffectAxios' element={<UseEffectAxios/>}></Route>
				<Route path='/useEffectCapture' element={<UseEffectCapture/>}></Route>
				<Route path='/useCallback' element={<UseCallback/>}></Route>
				<Route path='/fc' element={<Fc/>}></Route>
				<Route path='/compont' element={<Compont/>}></Route>
				{/* 设置/,否则console会有警告 */}
				<Route path='/' element={<Navigate to='/context'/>}></Route>
				
				
				
			</Routes>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};
export default App;